<template>
  <div>
    <ComDialog
      width="400px"
      title="上传视频"
      :show-file-list="false"
      @EventClose="closeFn"
      :dialogVisible="dialogVisible"
    >
      <el-upload
        drag
        :on-error="errorFn"
        class="upload-demo"
        :before-upload="beforeFn"
        :action="videoConfig.action"
        :accept="videoConfig.accept"
        :http-request="upload"
        :on-change="progressFn"
        :on-success="successFn"
      >
        <template>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </template>

        <div slot="tip" class="el-upload__tip">
          只能上传{{ loadRules.join("、") }}文件，且不超过 {{ Rules.size }}
          {{ "  " + Rules.unit }}
        </div>
      </el-upload>
      <div class="progress">
        <el-progress
          :text-inside="true"
          :stroke-width="24"
          :percentage="percentage"
          status="success"
        ></el-progress>
      </div>
    </ComDialog>
  </div>
</template>
<script>
import ComDialog from "../../../components/comDialog.vue";
import {
  getVideoListveAddAPi,
  getConfigGetInfoPathAPi,
} from "@/wss/api/ContentSupervision/videoManagement.js";
import { getListVideoAPi } from "@/wss/api/ContentSupervision/videoSetting.js";
// import { getConfigGetInfoPathAPi } from "@/wss/api/ContentSupervision/videoSetting.js";
export default {
  props: {
    data: {
      type: [String, Number],
      default: "",
    },
    folderParams: {
      type: Object,
      default: () => {},
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: { ComDialog },
  data() {
    return {
      percentage: 0,
      showProgress: false,
      loadRules: [],
      // 视频规则
      Rules: {
        size: "",
        unit: "",
      },
      videoConfig: {
        action: "#",
        accept: "video/*",
        data: {
          file: "我夹",
          folderId: "1469230948591083520",
          name: "a",
          format: "mp4",
          path: "a",
          size: 628966,
        },
      },
    };
  },
  created() {
    this.getListVideoFn();
  },
  methods: {
    //
    progressFn(file) {
      console.log(file);
      if (file.status == "ready") {
        this.percentage = 10;
      }
      console.log("上传中");
      // console.log("风雨");
    },
    // 上传文件
    async upload(files) {
      let formdata, name, format, file;
      formdata = new FormData();
      file = files.file;
      // 文件名
      name = file.name.split(".")[0];
      // 格式
      format = file.name.split(".")[1];

      formdata.append("size", file.size);
      formdata.append("name", name);
      formdata.append("format", format);
      formdata.append("path", this.folderParams.name);
      formdata.append("file", file);
      formdata.append("folderId", this.folderParams.id);

      let { code, msg } = await getVideoListveAddAPi(formdata);
      if (code == 200) {
        this.$modal.msgSuccess(msg);
      }

      console.log(file, "111");
    },
    // 上传成功的回调
    successFn(response, file, fileList) {
      this.percentage = 0;
      this.$emit("EventGetList");
    },
    // 查询是否有相同的视频名称 file当前上传的文件信息
    async getConfigGetInfoPath(file) {
      let data = {};
      data.name = file.name.split(".")[0];
      data.path = this.folderParams.name;
      data.folderId = this.folderParams.id;
      data.format = file.name.split(".")[1];
      console.log(data, "datadata");
      let result = await getConfigGetInfoPathAPi(data);

      return result.data;
    },
    // 上传前的钩子
    async beforeFn(file) {
      const { type, name, size } = file;
      let current = name.split(".")[1];
      console.log(size);
      console.log(this.Rules.size);
      const ruleSize = parseFloat(this.Rules.size);
      const unit = this.Rules.unit;

      let result = 0;

      switch (unit) {
        case "MB":
          result = size / 8 / 1024 / 1024;

          break;
        case "KB":
          result = size / 8 / 1024;

          break;
        case "B":
          result = size / 8;
          break;
      }
      // 文件大小
      if (result > ruleSize) {
        console.log("jinlaile");
        this.$modal.msgWarning("文件过大");
        this.closeFn();
        return Promise.reject();
      }
      // 格式是否正确
      if (!this.loadRules.includes(current)) {
        this.$modal.msgError("格式不符合");
        this.closeFn();
        return Promise.reject();
      }
      // 是否已有文件夹
      let flag = await this.getConfigGetInfoPath(file);

      if (flag) {
        try {
          await this.$modal.confirm(
            "已存在该视频，本操作会出该原本视频，是否继续"
          );
        } catch (error) {
          this.percentage = 0;
          // 用户不上传
          return Promise.reject();
        }
      }
      this.percentage = 100;
    },
    //  获取是视频配置
    async getListVideoFn() {
      let { rows, code } = await getListVideoAPi();
      // 规则
      if (code) {
        rows.forEach((item) => {
          if (item.type == "v_format") {
            this.loadRules.push(item.value);
          } else if (item.type == "v_size") {
            this.Rules.size = item.value;
          } else if (item.type == "v_size_unit") {
            this.Rules.unit = item.value;
          }
        });
      }
    },
    errorFn(err, file, fileList) {
      console.log({ err, file, fileList });
    },
    uploadFn() {
      console.log(this.videoConfig.data);

      // console.log(result);
    },
    //关闭对话框
    closeFn() {
      this.$emit("update:dialogVisible", false);
      this.percentage = 0;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-upload__tip {
  // font-weight: 900;
  font-size: 14px;
}
.progress {
  margin-top: 10px;
}
</style>